<script setup>
import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

onMounted(() => {
  renderEcharts(flag.value ? option1.value : option2.value);
});

const chartRef = ref(null);
const { renderEcharts } = useEcharts(chartRef);

// 整体积分趋势数据
const option2 = ref({
  backgroundColor: 'transparent',
  grid: {
    top: 40,
    bottom: 20,
    left: '3%',
    right: '4%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    name: '积分',
    nameTextStyle: {
      color: '#fff',
      padding: [0, 0, 5, 0],
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110],
      type: 'bar',
      barWidth: '10%',
      animation: {
        duration: 2000,
        easing: 'cubicInOut',
      },
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(0, 229, 255, 1)',
            },
            {
              offset: 1,
              color: 'rgba(0, 229, 255, 0.1)',
            },
          ],
        },
      },
    },
  ],
});

// 各组织积分趋势数据
const option1 = ref({
  backgroundColor: 'transparent',
  grid: {
    top: 40,
    bottom: 20,
    left: '3%',
    right: '4%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  dataZoom: [
    {
      type: 'inside',
    },
    {
      type: 'slider',
    },
  ],
  legend: {
    data: ['组织A', '组织B', '组织C'],
    textStyle: {
      color: '#fff',
      fontSize: 12,
    },
    top: 0,
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    name: '积分',
    nameTextStyle: {
      color: '#fff',
      padding: [0, 0, 5, 0],
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [
    {
      name: '组织A',
      type: 'bar',
      barWidth: '10%',
      animation: {
        duration: 2000,
        easing: 'cubicInOut',
      },
      data: [120, 200, 150, 80, 70, 110],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(64, 158, 255, 1)',
            },
            {
              offset: 1,
              color: 'rgba(64, 158, 255, 0.1)',
            },
          ],
        },
        borderRadius: [5, 5, 0, 0],
        shadowColor: 'rgba(64, 158, 255, 0.5)',
        shadowBlur: 10,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(64, 158, 255, 0.8)',
        },
      },
    },
    {
      name: '组织B',
      type: 'bar',
      barWidth: '10%',
      animation: {
        duration: 2000,
        easing: 'cubicInOut',
      },
      data: [100, 180, 130, 70, 60, 90],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(147, 112, 219, 1)',
            },
            {
              offset: 1,
              color: 'rgba(147, 112, 219, 0.1)',
            },
          ],
        },
        borderRadius: [5, 5, 0, 0],
        shadowColor: 'rgba(147, 112, 219, 0.5)',
        shadowBlur: 10,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(147, 112, 219, 0.8)',
        },
      },
    },
    {
      name: '组织C',
      type: 'bar',
      barWidth: '10%',
      animation: {
        duration: 2000,
        easing: 'cubicInOut',
      },
      data: [90, 160, 110, 60, 50, 80],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(0, 255, 127, 1)',
            },
            {
              offset: 1,
              color: 'rgba(0, 255, 127, 0.1)',
            },
          ],
        },
        borderRadius: [5, 5, 0, 0],
        shadowColor: 'rgba(0, 255, 127, 0.5)',
        shadowBlur: 10,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(0, 255, 127, 0.8)',
        },
      },
    },
  ],
});

// 切换状态
const flag = ref(true);
// dataZoom显示状态
const showDataZoom = ref(true);
// 切换图表显示
const handleChange = () => {
  flag.value = !flag.value;
  updateChartOptions();
};
// 切换dataZoom显示
const toggleDataZoom = () => {
  showDataZoom.value = !showDataZoom.value;
  updateChartOptions();
};
// 更新图表配置并重新渲染
const updateChartOptions = () => {
  const currentOption = flag.value ? option1.value : option2.value;
  // 根据showDataZoom状态决定是否显示dataZoom
  if (showDataZoom.value) {
    currentOption.dataZoom = [
      {
        type: 'inside',
      },
      {
        type: 'slider',
      },
    ];
  } else {
    currentOption.dataZoom = [];
  }
  renderEcharts(currentOption);
};
</script>

<template>
  <dv-border-box-13 class="box">
    <div class="mb-2 flex items-center justify-between px-4">
      <h3 class="text-lg text-white">
        {{ flag ? '积分趋势(整体)' : '积分趋势(各级组织)' }}
      </h3>
      <div
        @click="handleChange"
        class="cursor-pointer text-center text-white transition-opacity duration-300 hover:opacity-80"
        style="height: 20px"
      >
        切换图表
      </div>
    </div>
    <EchartsUI
      ref="chartRef"
      class="w-full"
      style="height: calc(100% - 50px)"
    />
  </dv-border-box-13>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
</style>
